<script>
    const data = {
        config : {
            upload : {
                action : api.album.upload.url,
                params : { album : null }
            },
            activeTab : 'base'
        },
        verify: {
            title: [
                {
                    required: true,
                    message: '请输入商品名称',
                    trigger: 'blur'
                }, {
                    min: 0,
                    max: 50,
                    message: '名称不能超过50个字符',
                    trigger: 'blur'
                }
            ],
            description: [
                {
                    min: 0,
                    max: 50,
                    message: '描述不能超过200个字符',
                    trigger: 'blur'
                }
            ],
            price: [
                {
                    type: 'number',
                    required: false,
                    message: '价格只能输入数字',
                    trigger: 'blur'
                }
            ]
        },

        form : {
            title: null,
            description: null,
            number: null,
            invoice : false,
            guarantee : false,
            isReturn : false,
            logisticsDistribution : false,
            logisticsSelf : false,
            shelvingMode : 0,
            shelvingTime : null,
            albums : [],
            specs : [],
            params : []
        }
    };

    export default {
        data() {
            api.store.info.submit({
                success(result) {
                    data.config.upload.params.album = result.defaultAlbum;
                }
            });
            data.form.albums.length = 0;
            for(let i=0; i<8; i++)
                data.form.albums.push({id : null, url : null});
            return data;
        },
        methods: {
            uploadSuccess(item) {
                return function (res) {
                    item.id = res.data.id;
                    item.url = res.data.url;
                }
            },
            appendSpec(){
                data.form.specs.push({
                    name : null,
                    price : null,
                    stock : null
                })
            },
            removeSpec(item) {
                let index = data.form.specs.indexOf(item);
                if (index !== -1)
                    data.form.specs.splice(index, 1);
            },
            appendParam(){
                data.form.params.push({
                    name : null,
                    value : null
                });
            },
            removeParam(item) {
                let index = data.form.params.indexOf(item);
                if (index !== -1)
                    data.form.params.splice(index, 1);
            },
            submitForm(){
                let formData = new URLSearchParams;
                formData.append('title', data.form.title);
                formData.append('description', data.form.description);
                formData.append('number', data.form.number);
                formData.append('invoice', data.form.invoice);
                formData.append('guarantee', data.form.guarantee);
                formData.append('isReturn', data.form.isReturn);
                formData.append('logisticsDistribution', data.form.logisticsDistribution);
                formData.append('logisticsSelf', data.form.logisticsSelf);
                // 相册数组
                for(let i=0; i<data.form.albums.length; i++) {
                    if(data.form.albums[i].id === null) break;
                    formData.append('albums[' + i + ']', data.form.albums[i].id);
                }
                // 上架方式
                if(data.form.shelvingMode === 0)
                    formData.append('shelving','now');
                else if(data.form.shelvingMode === 1)
                    formData.append('shelving','none');
                else formData.append('shelving',data.form.shelvingTime);
                // 规格数组
                for(let i=0; i<data.form.specs.length; i++) {
                    formData.append('specs['+i+'][name]', data.form.specs[i].name);
                    formData.append('specs['+i+'][price]', data.form.specs[i].price);
                    formData.append('specs['+i+'][stock]', data.form.specs[i].stock);
                }
                // 参数数组
                for(let i=0; i<data.form.params.length; i++) {
                    formData.append('params['+i+'][name]', data.form.params[i].name);
                    formData.append('params['+i+'][value]', data.form.params[i].value);
                }
                self = this;
                api.goods.create.submit({
                    data : formData,
                    success (data) {
                        self.$message({
                            type: 'success',
                            message: '恭喜您，店铺信息已经添加成功',
                            duration : 1500
                        });
                    },
                    fail (message) {
                        self.$message({
                            type: 'warning',
                            message: message,
                            duration : 1500
                        });
                    }
                });
            }
        }
    }
</script>

<template>
    <div class="content-box">
        <el-form :model="form" :rules="verify" ref="form" label-width="80px">
            <el-tabs v-model="config.activeTab">
                <el-tab-pane label="基本信息" name="base">
                    <el-form-item label="商品名称" prop="title">
                        <el-input class="long" v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="商品简介" prop="description">
                        <el-input
                                class="long"
                                type="textarea"
                                resize="none"
                                :rows="4"
                                v-model="form.description">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="商品货号">
                        <el-input class="short" v-model="form.number"></el-input>
                    </el-form-item>
                    <el-form-item label="售后保障">
                        <el-checkbox v-model="form.invoice">提供发票</el-checkbox>
                        <el-checkbox v-model="form.guarantee">保修服务</el-checkbox>
                        <el-checkbox v-model="form.isReturn">七天退换</el-checkbox>
                    </el-form-item>
                    <el-form-item label="提货方式">
                        <el-checkbox v-model="form.logisticsDistribution">物流配送</el-checkbox>
                        <el-checkbox v-model="form.logisticsSelf">到店自取</el-checkbox>
                    </el-form-item>
                    <el-form-item label="上架时间">
                        <el-radio class="radio" v-model="form.shelvingMode" :label="0">立即上架</el-radio>
                        <el-radio class="radio" v-model="form.shelvingMode" :label="1">放入仓库</el-radio>
                        <el-radio class="radio" v-model="form.shelvingMode" :label="2">定时上架</el-radio>
                        <el-date-picker
                                v-model="form.shelvingTime"
                                v-if="form.shelvingMode==2"
                                type="datetime"
                                class="shelvingTime"
                                placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="商品相册" name="album">
                    <div class="tab-box">
                        <el-upload
                                v-for="(item, index) in form.albums"
                                class="avatar-uploader"
                                :action="config.upload.action"
                                :show-file-list="false"
                                :data="config.upload.params"
                                :on-success="uploadSuccess(item)"
                                :disabled="index!=0 && item.id==null && form.albums[index-1].id==null"
                                :auto-upload="true">
                            <h5 v-if="index==0" class="album-main">主图</h5>
                            <img v-if="item.url" :src="item.url" class="avatar">
                            <i v-else
                               :style="{ cursor: index!=0 && item.id==null && form.albums[index-1].id==null?'not-allowed':'pointer'}"
                               class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                    <div class="tab-message">
                        <div class="el-alert el-alert--info">
                            <div class="el-alert__content">
                                <span class="el-alert__title is-bold">上传要求</span>
                                <p class="el-alert__description">
                                    1. 请使用jpg\jpeg\png等格式、单张大小不超过1M的正方形图片。
                                </p>
                                <p class="el-alert__description">
                                    2. 最多可上传8张图片，图片必须依次上传，不能间隔。
                                </p>
                                <p class="el-alert__description">
                                    3. 图片最终显示排序与上传框的排序序列一致，根据需要进行调整。
                                </p>
                                <p class="el-alert__description">
                                    4. 图片质量要清晰，不能虚化，要保证亮度充足。
                                </p>
                            </div>
                        </div>
                        <div class="el-alert el-alert--info">
                            <div class="el-alert__content">
                                <span class="el-alert__title is-bold">建议</span>
                                <p class="el-alert__description">
                                    1. 主图为白色背景正面图。
                                </p>
                                <p class="el-alert__description">
                                    2. 排序依次为正面图->背面图->侧面图->细节图。
                                </p>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="商品规格" name="spec">
                    <div class="tab-box ">
                        <el-table
                                :style="{borderBottomWidth:(form.specs.length===0)?'1px':0}"
                                class="specs-box"
                                :data="form.specs">
                            <el-table-column label="型号">
                                <template scope="scope">
                                    <el-input
                                            class="specs-input"
                                            placeholder="规格名称"
                                            v-model="scope.row.name">
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="库存">
                                <template scope="scope">
                                    <el-input-number
                                            class="specs-input"
                                            v-model="scope.row.stock"
                                            :step="100"
                                            :min="0"
                                            :max="10000">
                                    </el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column label="售价">
                                <template scope="scope">
                                    <el-input
                                            class="specs-input"
                                            placeholder="规格售价"
                                            v-model="scope.row.price">
                                        <template slot="append">元</template>
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column :width="80">
                                <template scope="scope">
                                    <el-button
                                            class="specs-input"
                                            @click.prevent="removeSpec(scope.row)"
                                            icon="delete">
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="tab-message">
                        <div class="tools">
                            <el-button
                                    icon="plus"
                                    type="primary"
                                    @click="appendSpec">
                                添加规格
                            </el-button>
                        </div>
                        <div class="el-alert el-alert--info">
                            <div class="el-alert__content">
                                <span class="el-alert__title is-bold">注意事项</span>
                                <p class="el-alert__description">
                                    1. 每件商品至少添加一个规格。
                                </p>
                                <p class="el-alert__description">
                                    2. 规格名称一般不超过15个字符。
                                </p>
                                <p class="el-alert__description">
                                    3. 规格售价为实际用户购买价格。
                                </p>
                                <p class="el-alert__description">
                                    4. 库存不大于100000,。
                                </p>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="商品参数" name="params">
                    <div class="tab-box ">
                        <el-table
                                :style="{borderBottomWidth:(form.params.length===0)?'1px':0}"
                                class="specs-box"
                                :data="form.params">
                            <el-table-column label="名称">
                                <template scope="scope">
                                    <el-input
                                            class="specs-input"
                                            placeholder="参数名称"
                                            v-model="scope.row.name">
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="值">
                                <template scope="scope">
                                    <el-input
                                            class="specs-input"
                                            placeholder="参数值"
                                            v-model="scope.row.value">
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column :width="80">
                                <template scope="scope">
                                    <el-button
                                            class="specs-input"
                                            @click.prevent="removeParam(scope.row)"
                                            icon="delete">
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="tab-message">
                        <div class="tools">
                            <el-button
                                    icon="plus"
                                    type="primary"
                                    @click="appendParam">
                                添加参数
                            </el-button>
                        </div>
                        <div class="el-alert el-alert--info">
                            <div class="el-alert__content">
                                <span class="el-alert__title is-bold">注意事项</span>
                                <p class="el-alert__description">
                                    1. 参数说明能够帮助用户了解商品。
                                </p>
                                <p class="el-alert__description">
                                    2. 可选规格不应当作为参数。
                                </p>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <el-form-item>
                <el-button type="primary" @click="submitForm">立即创建</el-button>
                <el-button>重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<style scoped>
    .short{
        width: 200px;
    }
    .specs-box{
        border-bottom: 1px solid #dfe6ec;
    }
    .specs-input{
        margin:5px 0;
        width: 100%;
    }
    .long{
        width: 600px;
    }
    .appendParam{
        width: 455px;
    }
    .content-box {
        padding: 30px 50px;
    }
    .content-box .tab-box{
        width: 610px;
        margin-bottom: 5px;
        float: left;
    }
    .content-box .tab-message{
        width: 280px;
        float: right;
    }
    .content-box .tab-message .tools{
        margin-bottom: 5px;
    }
    .content-box .tab-message .tools > *{
        width: 100%;
    }
    .content-box .tab-message .el-alert{
        margin-bottom: 5px;
    }
    .content-box .album-main{
        position: absolute;
        width: 145px;
        text-align: center;
        line-height: 26px;
        padding: 0;
        background-color: #d9d9d9;
        height: 28px;
        color: #FFF;
        margin: 0;
    }
    .content-box .album{
        padding: 0 15px 20px;
        min-height: 620px;
    }
    .content-box .shelvingTime{
        margin-left: 15px;
    }
    .content-box .chapter-classes-num{
        display: block;
        float: right;
        margin-top: 7px;
        margin-right: 5px;
    }
    .content-box .chapter-classes-title{
        display: block;
        float: right;
        margin-right: 17px;
    }
    .content-box .chapter-classes-sub:first-child{
        margin-top: 0;
    }
    .content-box .chapter-classes-sub:last-child{
        margin-bottom: 0;
    }
    .content-box .chapter-classes-sub{
        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 20px;
    }
    .content-box .chapter-classes-sub span{
        line-height: 30px;
    }
    .avatar-uploader{
        display: block;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        margin-right: 5px;
        margin-bottom: 12px;
        float: left;
        height: 145px;
        width: 145px;
    }
    .avatar-uploader:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 145px;
        height: 145px;
        line-height: 145px;
        text-align: center;
    }
    .avatar {
        width: 145px;
        height: 145px;
        display: block;
    }
</style>